<!DOCTYPE HTML>
<head>
  <meta charset = "UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <style type="text/css">
    #root{
      text-align: center;
      margin: 18px;
      padding-right: 16px;
      padding-left: 16px;
      padding-bottom: 16px;
      padding-top: 16px;
      
    }
    table{position: absolute;top: 160px;left:400px;    width: 400px;height: 100px;
        }
  /*  textarea{background-color: darkgrey;border: black 1px;text-align:left;resize: none;
    width: 400px;height: 300px;font-size: 10pt;position:absolute; top: 270px;left: 200px; }
*/
  </style>
</head>
<html>
<body style="min-width: auto;" background="#666666" >
<h1 style="padding-left: 41%; margin: auto;">分治法求解最大子段和</h1> 
<div style = "padding-left: 950px;padding-top: 150px;white-space: nowrap;">最大子段和为：</div> 
<span  id="result1" style="left: 1100px;position: absolute;top: 206px;"></span>
<button type = "button" id = "btn" onclick="show()" style = "left:1150px;position:absolute;top: 206px;white-space: nowrap;">随机数并求解</button>
<textarea name="solution" id = "content" rows="10" cols="1" readonly = "true" style=" font-size: 20pt;background-color: blanchedalmond;max-width: 750px;min-width: 750px;
max-height: 300px;min-height: 300px;position: relative;left: 320px;top: 150px;"></textarea>
<p style="padding-left: 85%;padding-top:8% ;">1820100 吕志鹏</p>

<div id = "root" >

<table class = "Array2DRenderer"  align="center" style="table-layout: fixed;word-break: break-all;">
  <tbody>
    <tr class = "Array2DRenderer_row_1">
        <td class = "Array2DRenderer_row_1_1" >
          <span class="Array2DRenderer_row_1_1_value" >0</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">1</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">2</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">3</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">4</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">5</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">6</span>
        </td>
        <td class = "Array2DRenderer_row_1_1">
          <span class="Array2DRenderer_row_1_1_value">7</span>
        </td>
    </tr>
    <tr class = "Array2DRenderer_row_2">
        <td id = "Array2DRenderer_row_2_0" >
          <span class = "Array2DRenderer_row_2_2_value_0">-2</span>
        </td>
        <td id = "Array2DRenderer_row_2_1">
          <span class = "Array2DRenderer_row_2_2_value_1">-3</span>
        </td>
        <td id = "Array2DRenderer_row_2_2">
          <span class = "Array2DRenderer_row_2_2_value_2">4</span>
        </td>
        <td id = "Array2DRenderer_row_2_3">
          <span class = "Array2DRenderer_row_2_2_value_3">-1</span>
        </td>
        <td id = "Array2DRenderer_row_2_4">
          <span class = "Array2DRenderer_row_2_2_value_4">-2</span>
        </td>
        <td id = "Array2DRenderer_row_2_5">
          <span class = "Array2DRenderer_row_2_2_value_5">1</span>
        </td>
        <td id = "Array2DRenderer_row_2_6">
          <span class = "Array2DRenderer_row_2_2_value_6">5</span>
        </td>
        <td id = "Array2DRenderer_row_2_7">
          <span class = "Array2DRenderer_row_2_2_value_7">-3</span>
        </td>
    </tr>
  </tbody>

</table>
</div>
<script>
    var nums = [];
    var vectorleft = [];
    var vectorright = [];
    var vectormax = [];
    var flag = 0;
    var smallflag = 0;

function RandomNumBoth(Min,Max)
{
  var Range = Max - Min;
  var Rand = Math.random();
  var num = Min + Math.round(Rand * Range);
  return num;
}
function display()
{
  for(var i = 0;i <= 7;i++)
  {
    var j = RandomNumBoth(-10,10);
    nums[i] = j;
    document.getElementById('Array2DRenderer_row_2_'+i).innerHTML = j;
  }
}
function textlengh()
{
  var btn = document.getElementById('btn');
  btn.disabled = 'disabled';
  setTimeout(function(){btn.disabled = '';},35000);
}
/**
 * @param {number[]} nums
 * @param {number} left
 * @param {number} right
 * @param {number} mid
 * @return {number}
 */
function crossSum(nums, left, right, mid) {
    if (left === right) {
        return nums[left];
    }

    let leftMaxSum = Number.MIN_SAFE_INTEGER;
    let leftSum = 0;
    for (let i = mid; i >= left; --i) {
        leftSum += nums[i];
        leftMaxSum = Math.max(leftMaxSum, leftSum);
    }

    let rightMaxSum = Number.MIN_SAFE_INTEGER;
    let rightSum = 0;
    for (let i = mid + 1; i <= right; ++i) {
        rightSum += nums[i];
        rightMaxSum = Math.max(rightMaxSum, rightSum);
    }

    return leftMaxSum + rightMaxSum;
}

/**
 * @param {number[]} nums
 * @param {number} left
 * @param {number} right
 * @return {number}
 */
function __maxSubArray(nums, left, right) {
    
    if (left === right) {
        return nums[left];
    }

    const mid = Math.floor((left + right) / 2);

    const lsum = __maxSubArray(nums, left, mid);
    const rsum = __maxSubArray(nums, mid + 1, right);
    const cross = crossSum(nums, left, right, mid);

    
    
    vectorleft[flag] = left;
    vectorright[flag] = right;
    vectormax[flag] = Math.max(lsum,rsum,cross);
    flag++;

    //document.getElementById('Array2DRenderer_row_2_0').style.backgroundColor = 'white';
  

    return Math.max(lsum,rsum,cross);
}




/**
 * @param {number[]} nums
 * @return {number}
 */
 function result1(nums) {
    return __maxSubArray(nums, 0, nums.length - 1);
}
function reload()
{
  vectorright.length = 0;
  vectorleft.length = 0;
  vectormax.length = 0;
  flag = 0;
  smallflag = 0;
  for(let k3 = 0;k3 <= 7;k3++)
    {    document.getElementById('Array2DRenderer_row_2_'+k3).style.backgroundColor = 'white';}
}
function show1()
{
  var my = setInterval(alertfun,3000);
}


function alertfun(){
     // document.getElementById('Array2DRenderer_row_2_'+(right - left)).style.backgroundColor = 'red';
     
     if(smallflag > 6) {clearInterval(my);}
     for(let k2 = 0;k2 <= 7;k2++)
    {    document.getElementById('Array2DRenderer_row_2_'+k2).style.backgroundColor = 'white';}
     for(let k1 = vectorleft[smallflag];k1 <= vectorright[smallflag];k1++)
    {
         document.getElementById('Array2DRenderer_row_2_'+k1).style.backgroundColor = 'red';

    }
    $("#content").val("序号"+vectorleft[smallflag]+"至"+vectorright[smallflag]+"的最大子段和为 ==> "+vectormax[smallflag]+"\r\n");
    smallflag++;
}

function show()
{
textlengh();
reload();
display();
var xd = result1(nums) ;
document.getElementById('result1').innerHTML = Math.floor(xd);
show1();

};



  
</script> 

</body>
</html>

